<!doctype html>

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-132775238-1');
  </script>
  <script data-ad-client="ca-pub-3841792756480152" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <meta name="description" content="RapiDoc is Web Component for viewing Swagger & OpenAPI Spec. Supports themes, styling and various rendering styles">
  <meta name="keywords" content="RapiDoc, ReDoc, Swagger, SwaggerUI, Custom Element, Web Component, OpenAPI,REST, themes, dark mode, markdown, API documentation">

  <link rel="shortcut icon" type="image/png" href="./images/logo.png"/>

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Exo:wght@300;500&display=swap" rel="stylesheet">


  <!-- Code Highlight -->
  <link rel="stylesheet" href="./prismjs/prism.css">
  <script src="./prismjs/prism.js"></script>

  <link rel="stylesheet" href="index.css">
  <title>RapiDoc - Examples & Demo</title>
  <style>
    .section-heading{
      padding:36px 10px 5px 10px;
      margin:0;
    }
    #main-img{
      width:740px;
    }
  </style>
</head>

<body>
  <div style="background-color: white; font-family: exo;font-weight: lighter; font-size:large; display:flex; flex-direction: row; align-items: center;justify-content: space-between">
    <div style="padding:15px 20px 15px 20px; ">
      Get a Stripe like API experience for your customers in minutes - documentation, rate-limiting and API-key auth with <a style="font-weight:bold; color:#FF00BD" href="https://zuplo.link/rapidoc-1">zuplo</a>
    </div>
    <div style="padding:2px 20px 2px 20px; ">
      <a class="zuplo-button" href="https://zuplo.link/rapidoc-1">Start free</a>
    </div>
  </div>
  <div class="banner" style="max-height:400px; overflow:hidden;">
    <div class='topbar'>
      <div class="header">
        <a class="menu-item" data-action="url" href="./index.html">
          <img class="logo" src="./images/logo.png" style="width:36px;height:36px;margin-right:10px;" href="./index.html"/>
        </a>  
        <div class="product-name">RapiDoc</div>
        <div class="menu" style="flex:1"></div>
        <nav class="menu" onclick="goToSection(event)">
          <a class="menu-item" data-action="url" href="./index.html"> Home </a>
          <a class="menu-item" data-action="url" href="./examples.html"> Examples </a>
          <a class="menu-item" data-action="url" href="./api.html"> API </a>
          <a class="menu-item" data-action="url" href="https://github.com/rapi-doc/RapiDoc"> GitHub </a>
        </nav>
      </div>
    </div>

    <!--Waves Container-->
    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
        </g>
      </svg>
    </div>
    <!--Waves end-->
  
  </div>


  <!-- Start of Examples -->
  <div class="flex-col">
    <h2> Vanilla HTML</h2>  
    Just copy the below code and save it in an html file. Then open it using a browser (you do not need any server)
    <a href="https://codesandbox.io/s/vanilla-js-template-98gc2?file=/index.html"> https://codesandbox.io/s/vanilla-js-template-98gc2?file=/index.html </a>
    <pre class="shadow code-block">
      <code class="language-html" style="border-radius:4px">
        &lt;!doctype html&gt; &lt;!-- Important: must specify --&gt;
        &lt;html&gt;
          &lt;head&gt;
            &lt;meta charset="utf-8"&gt; &lt;!-- Important: rapi-doc uses utf8 characters --&gt;
            &lt;script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"&gt;&lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
            &lt;rapi-doc spec-url = "https://petstore.swagger.io/v2/swagger.json"&gt; &lt;/rapi-doc&gt;
          &lt;/body&gt; 
        &lt;/html&gt;
      </code>
    </pre>
    <div> If you do not want to depend on the CDN, just download it from there and store it in a place that you can access </div>


    <br/><br/>
    <img src="./images/divider1.png" style="width:300px">
    <h2> In JavaScript Apps (integration with other frameworks)</h2>

    <h3> Install RapiDoc</h3>
    <pre class="shadow code-block" >
      <code class="language-javascript" style="border-radius:4px">
        npm install rapidoc
        // (feel free to use yarn)
      </code>
    </pre>
    <div>You can now use the Web Components like any other HTML tag. (Just do an import for it to be recognized by the browser)</div>
    <br/>
    <img src="./images/divider1.png" style="width:300px">

    <h3> Usage in React</h3>
    <a href="https://codesandbox.io/s/upbeat-sea-4tfo7?file=/src/App.js"> https://codesandbox.io/s/upbeat-sea-4tfo7?file=/src/App.js </a>
    <pre class="shadow code-block" >
      <code class="language-js" style="border-radius:4px">
        import React, { Component } from 'react';
        import 'rapidoc'; // <-- import rapidoc

        export class MyApiDoc extends Component {
          render() {
            return &lt;rapi-doc 
              spec-url = "https://petstore.swagger.io/v2/swagger.json" 
              render-style = "read"
              style = {{ height: "100vh", width: "100%" }}
            &gt;
            &lt;/rapi-doc&gt;
          }
        }
      </code>
    </pre>
    <br/>
    <img src="./images/divider1.png" style="width:300px">

    <h3> Usage in Vue (Single File Component)</h3>
    <a href="https://codesandbox.io/s/nostalgic-sky-jlts7?file=/src/App.vue"> https://codesandbox.io/s/nostalgic-sky-jlts7?file=/src/App.vue </a>

    <pre class="shadow code-block" >
      <code class="language-js" style="border-radius:4px">
        &lt;template&gt;
          &lt;rapi-doc 
            spec-url = "https://petstore.swagger.io/v2/swagger.json" 
            render-style = "read" 
            style = "height:100vh; width:100%"
          &gt; &lt;/rapi-doc&gt;
        &lt;/template&gt;

        &lt;script&gt;
          import 'rapidoc';
        &lt;/script&gt;
      </code>
    </pre>
    <br/>
  </div>
  <!-- End of Examples -->

  <div id="footer" class="footer">
    <div class="footer-item"> MIT Licence</div>
    <div class="footer-item"> <a href="https://github.com/rapi-doc/RapiDoc"> GitHub</a></div>
    <div class="footer-item"> <a href="https://mrin9.github.io/RapiPdf/"> RapiPDF</a></div>
    <div class="footer-item hide-in-mobile"> <a href="https://www.npmjs.com/package/rapidoc"> npm</a></div>
  </div>

  <script>
    function goToSection(e){
      if (e.target.dataset.action==='url'){
        return;
      }

      e.preventDefault();
      var gotoEl = document.getElementById(e.target.getAttribute('href').substring(1));
      if (gotoEl){
        gotoEl.scrollIntoView({ block: 'start',  behavior: 'smooth' });
      }
    }
  </script>
</body>

</html>
